<template>
  <el-dialog v-model="dialogVisible" title="编辑账号信息" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close>
    <el-main>
      <el-row :gutter="15">
        <el-col :lg="24">
          <el-card shadow="never">
            <el-tabs tab-position="top">
              <el-tab-pane label="个人信息">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
                  <el-form-item label="头像" prop="avatar">
                    <sc-upload-multiple ref="avatar" v-model="form.avatar" title="选择头像"></sc-upload-multiple>
                  </el-form-item>
                  <el-form-item label="登录账号" prop="account">
                    <el-input v-model="form.account" disabled placeholder="用于登录系统" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" prop="realname">
                    <el-input v-model="form.realname" placeholder="请输入完整的真实姓名" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入昵称" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submit">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="second">
                <el-form ref="passwordForm" :model="password" label-width="80px" style="width: 460px;margin-top:20px;"
                         :rules="secondRules">
                  <el-form-item label="旧密码" prop="oldPassword">
                    <el-input type="password" v-model="password.oldPassword" clearable
                              show-password  ></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="password.newPassword" clearable
                              show-password ></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="newPassword2">
                    <el-input type="password" v-model="password.newPassword2" clearable
                              show-password ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitPassword">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-dialog>
</template>

<script>
import api from '@/api/index.js'
export default {
  name: 'userCenter',
  data() {
    return {
      dialogVisible: false,
      form: {
        id:0,
        account: "",
        avatar: "",
        nickname: "",
        phone: "",
        realname: "",
        remark: "",
        roleIdList: [],
        status: 1
      },
      password: {
        oldPassword: '',
        newPassword: '',
        newPassword2: '',
      },
      rules: {

      },
      secondRules: {
        newPassword: [
          {required: true, message: '请输入新密码'}
        ],
        newPassword2: [
          {required: true, message: '请输入确认密码'},
          { validator: (rule,value,callback) => {
              if (value === '') {
                return callback(new Error('请输入确认密码'))
              } else if (value !== this.password.newPassword) {
                return callback(new Error('二次密码不一致'))
              } else {
                return callback()
              }
            }}
        ],
        oldPassword: [
          {required: true, message: '请输入旧密码'}
        ],
      },
    }
  },
  //路由跳转进来 判断from是否有特殊标识做特殊处理
  beforeRouteEnter (to, from, next){
    next((vm)=>{
      if(from.is){
        //删除特殊标识，防止标签刷新重复执行
        delete from.is
        //执行特殊方法
        vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
          type: 'success',
          center: true
        }).then(() => {}).catch(() => {})
      }
    })
  },
  mounted() {
    // this.getMyInfo()
  },
  methods: {
    show() {
      this.dialogVisible = true;
      this.getMyInfo()
    },
    async getMyInfo() {
      let res = await api.system.admin.person();
      if (res.code === 0) {
          this.$refs.avatar.setBaseUrl(res.data.avatar_profix);
          this.form = res.data
      }
    },
    async submit() {
      let submitData = {};
      Object.assign(submitData, this.form);
      let res = await api.system.admin.userUpdate(submitData);
      if(res.code === 0){
        this.$message.success("操作成功")
      }else{
        this.$alert(res.message, "提示", {type: 'error'})
      }
    },
    async submitPassword() {
      let submitData = {};
      Object.assign(submitData, this.password);
      let res = await api.system.admin.changePass(submitData);
      if(res.code === 0){
        this.$message.success("操作成功")
        this.$refs.passwordForm.resetFields();
      }else{
        this.$alert(res.message, "提示", {type: 'error'})
      }
    }
  }
}
</script>

<style scoped>
.el-card {margin-bottom:15px;}
.activity-item {font-size: 13px;color: #999;display: flex;align-items: center;}
.activity-item label {color: #333;margin-right:10px;}
.activity-item .el-avatar {margin-right:10px;}
.activity-item .el-tag {margin-right:10px;}

[data-theme='dark'] .user-info-bottom {border-color: var(--el-border-color-base);}
[data-theme='dark'] .activity-item label {color: #999;}
</style>
